<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

#app {
    text-align: center;
}
    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2>接受子组件传递过来的值：{{getMsg}}</h2>
        <home title='我是home的标题'></home>

        <home :data='data'     @send-to-parent='getData'></home>

        <hr>

        <news />
    </div>
    <script src="./vue.js"></script>
    <script>
  let eventBus=new Vue()



        Vue.component("home",{
            // props:[],{}
            props:['title','data'],
            data(){
                return {
                    mymsg:"我是儿子的数据  我考了100分",
                    getNews:''
                }
            },
            template:
            `<div>  每个组件都是一个实例对象  复用(重复使用) 
                 <h2>{{title}}</h2> 
                <h3>{{data}}</h3>   
                  <button  @click='sendData'>  点击发送成绩给老爸</button>    
                  <h4  style='color:red'>  {{getNews}}</h4>
                
                </div>`,

                methods:{
                    sendData(){
                        // $emit('自定义方法名字','数据')
                        this.$emit('send-to-parent', this.mymsg)
                    }
                },
                mounted() {
                    eventBus.$on('to-home',(data)=>{
                        console.log(data)
                        this.getNews=data
                    })
                },

        })


        Vue.component("news",{
            template:`
           <div>
            <div>    news 组件</div>
            <button @click='sendHome'>点击发送到home组件</button>
            
            </div>
            `,
            methods:{
                sendHome() {
                    eventBus.$emit('to-home','news你要吗')
                }
            }


        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'vue',
                data:'我是爸爸  爸爸好 没钱了',
                getMsg:''
            },
            methods: {

                getData(data) {
                    console.log(data)
                    this.getMsg=data
                }
            }
        });
    </script>
</body>

</html>